<script lang="ts" setup>
  import type { ConsultRecord } from "@/types/room"

  // 定义属性接收外部传入的数据
  const props = defineProps<{ info: ConsultRecord }>()

  // 患病时长
  const illnessTimes = [
    {
      type: 1,
      value: "一周内",
    },
    {
      type: 2,
      value: "一个月内",
    },
    {
      type: 3,
      value: "半年内",
    },
    {
      type: 4,
      value: "半年以上",
    },
  ]
  // 是否就诊过
  const consultFlags = [
    {
      type: 1,
      value: "就诊过",
    },
    {
      type: 0,
      value: "没有就诊过",
    },
  ]
  // 点击放大预览图片
  const onPreview = () => {
    // 调用uniapp的api
    uni.previewImage({ urls: props.info.pictures.map((v) => v.url) })
  }
</script>
<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        {{ info.patientInfo?.name }}
        {{ info.patientInfo?.genderValue }}
        {{ info.patientInfo?.age }}岁
      </view>
      <view class="note">
        {{ illnessTimes.find((item) => item.type === info.illnessTime)?.value }}
        |
        {{ consultFlags.find((item) => item.type === info.consultFlag)?.value }}
      </view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ info.illnessDesc }}</text>
      </view>
      <view class="list-item" v-if="info.pictures.length">
        <text class="label">图片</text>
        <text class="note" @click="onPreview">点击查看</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .patient-info {
    padding: 30rpx;
    margin-top: 60rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .header {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;

      .title {
        font-size: 32rpx;
        color: #121826;
        margin-bottom: 10rpx;
      }

      .note {
        font-size: 26rpx;
        color: #848484;
      }
    }

    .content {
      margin-top: 20rpx;
      font-size: 26rpx;

      .list-item {
        display: flex;
        margin-top: 10rpx;
      }

      .label {
        width: 130rpx;
        color: #3c3e42;
      }

      .note {
        flex: 1;
        line-height: 1.4;
        color: #848484;
      }
    }
  }
</style>
